<script setup lang="ts">

import {getCurrentInstance, ref} from "vue";
import Blog_table, {type optionType} from "@/components/admin/blog_table.vue";
import {menuDelAxios, menuListAxios, type MenuRsp} from "@/api/menu_api";
import Menu_update_modal from "@/views/admin/system/menu_update_modal.vue";
import Menu_add_modal from "@/views/admin/system/menu_add_modal.vue";
import {Message} from "@arco-design/web-vue";

const columns = [
  {title: '菜单标题', dataIndex: 'title',},
  {title: '路劲', dataIndex: 'path',},
  {title: 'slogan', dataIndex: 'slogan',},
  {title: '简介', dataIndex: 'abstract',},
  {title: '简介切换时间/秒', dataIndex: 'abstract_time',},
  {title: '图片', slotName: 'image_list',},
  {title: '图片切换时间/秒', dataIndex: 'image_time',},
  {title: '更新时间', slotName: 'updated_at',},
  {title: '操作', slotName: 'action',},
]
const actionOptionList = ref<optionType[]>([
  {label: "批量删除", value: 1},
])

const mitt = getCurrentInstance()

const check = true

mitt?.proxy?.$Bus.on("del", (id_list) => {
  del(id_list as number[])
  mitt?.proxy?.$Bus.emit("refresh")
})

async function del(id_list: number[]) {
  let rsp = await menuDelAxios({id_list: id_list})
  if (rsp.code === 0) {
    Message.success(rsp.msg)
    mitt?.proxy?.$Bus.emit("refresh")
    return
  }
  Message.success(rsp.msg)
}

</script>

<template>
  <div class="menu_list_view">
    <menu_add_modal></menu_add_modal>

    <menu_update_modal></menu_update_modal>

    <blog_table :url="menuListAxios"
                :optionTypeList="actionOptionList"
                :check="check"
                :columns="columns"
                :limit="10"
                add="添加菜单"
                update="编辑"
                del="删除">

      <template #image_list="{record}:{record:MenuRsp}">
        <div class="menu_column_image">
          <a-image
              height="40px"
              v-for="item in record.image_list"
              :key="item.image_id"
              :src="item.image_path">
          </a-image>
        </div>
      </template>

    </blog_table>
  </div>
</template>

<style lang="scss">
.menu_list_view {
  .menu_column_image {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-row-gap: 5px;

    .arco-image-img {
      margin-right: 5px;
      border-radius: 5px;
    }
  }
}
</style>
